<script lang="ts">
import { defineComponent, ref, onMounted, watch, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getUserInfo, getUserFans, getUserFollowees, getUserArticles } from "../api/userInfoView"
import { storeToRefs } from 'pinia';
import { useCounterStore } from '..//stores/home'
import { useScroll } from '../hooks/useScroll'

export default defineComponent({
    setup() {

        const store = useCounterStore()
        const { userid, idarr } = storeToRefs(store);
        // 作为 action 的 increment 可以直接解构
        const { changnum, increment, incrementfalse, unlikeFuns, likeFuns, uncommentFuns, commentFuns } = store;
        let router = useRouter()
        let route = useRoute()
        let token: any = ref(window.localStorage.getItem("userId"))
        console.log(token.value);
        let page: number = 1;
        let scrollTop = ref<number>(document.documentElement.scrollTop);
        let isbottom = ref(false);

        let tovip: any = (): any => {
            router.push({ path: "/vip" })
        }
        // 获取用户粉丝
        let fans: any = ref([])

        // 加载动画是否需要
        let fanslengthnum: any = ref(null)
        const getUserFansFun = (): any => {
            getUserFans(route.query.userid || token.value, { page }).then((data: any) => {
                console.log("getUserFans=>", data);

                if (data.data.list) {

                    fanslengthnum.value = data.data.list.length
                } else {
                    fanslengthnum.value = data.data.length

                }
                if (data.message == "OK") {
                    data.data.list.forEach((item: any) => {
                        fans.value.push(item);
                    })
                } else {
                    // router.back()
                    fans.value.push({
                        userinfo: {
                            username: '该 用 户 已 关 闭 查 看 列 表',
                            id: 1, count: { count_follower: "" }
                        },

                    })

                }
                // data.data.list.forEach((item: any) => {
                //     fans.value.push(item);
                // })
            })
        }
        // 点击头像跳转主页
        let touserinfo=(id:any)=>{
            console.log(id);
            router.push({
                path:"/userdetail",
                query:{
                    userid:id
                }
            })
            // userdetail?userid=10156504&active=1
        }

        let onscroll = () => {
            scrollTop.value = document.documentElement.scrollTop;
            isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
            console.log('9999999999999', isbottom.value)

        }

        watch(token, () => {
            console.log("qqqq");
            getUserFansFun()

        })
        watch(isbottom, () => {
            if (isbottom.value) {
                page += 1;
                console.log('222222222page=>', page);
                getUserFansFun();
            }

        })
        let toregisterFun = () => {
            router.push({
                path: '/register',
            });

        }


        onMounted(() => {
            getUserFansFun();
            window.addEventListener('scroll', onscroll);

        })
        onUnmounted(() => {
            window.removeEventListener('scroll', onscroll)
        })
        return {
            tovip,
            fans,
            token,
            idarr,
            fanslengthnum,
            toregisterFun,
            touserinfo,
            incrementfalse,
            increment

        }
    },


})
</script>

<template>
    <div class="attention">
        <div class="attention-top">
            <div class="iconfont icon-xiangzuojiantou" @click="$router.back()"></div>
            <div>粉丝列表</div>
            <div></div>
        </div>
        <div class="attention-main" v-for="item in fans" :key="item.userinfo.id">
            <div class="attention-main-left" @click="touserinfo(item.userinfo.id)">
                <img :src="item.userinfo.avatar" alt="" >
                <div class="smallimage" v-if="item.userinfo.vip_flag == 1" style="background-color: #fff;">
                    <img src="../assets/images/177会员、vip.png" alt="" />
                </div>
            </div>
            <div class="attention-main-center">
                <div class="attention-size">
                    <div class="attention-name">
                        {{ item.userinfo.username }}
                        <span class="iconfont icon-VIP1" v-if="item.userinfo.vip_flag == 1" style=" color: #e73f29;
                            "></span>
                    </div>
                    <div class="attention-sess"><span v-if="item.userinfo.occupation">{{ item.userinfo.occupation
                    }}&nbsp;.&nbsp;</span>
                        <span>{{ item.userinfo.ip_location }}&nbsp;.&nbsp;</span> <span>粉丝{{
                            item.userinfo.count.count_follower }}</span>
                    </div>
                </div>

                <div class="attention-right" v-if="!idarr.includes(item.userinfo.id)" @click="increment(item.userinfo.id)">
                    <span>
                        关注
                    </span>
                </div>
                <div class="attention-right" v-else @click="incrementfalse(item.userinfo.id)"><span>
                        已关注
                    </span></div>
            </div>
        </div>
        <div class="loading" v-if="fanslengthnum==10&&fanslengthnum!==''">
            <van-loading size="24px">加载中...</van-loading>

        </div>

    </div>
</template>
<style lang="scss" scoped>
.attention {
    padding: 15px 0;

    .loading {
        width: 100%;
        text-align: center;

    }

    .attention-top {
        padding: 0 15px;
        display: flex;
        font-size: 16px;
        justify-content: space-between;


    }

    .attention-main {
        padding: 15px 15px;
        display: flex;
        margin: 16px 0;
        border-top: 1px solid #f7f7f7;
        border-bottom: 1px solid #f7f7f7;

        // justify-content: space-between;
        .attention-main-left {
            width: 50px;
            height: 50px;
            margin-left: 5px;
            border-radius: 50%;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;

            }

            .smallimage {
                position: absolute;
                top: 30px;
                right: 0;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;

                img {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                }
            }
        }

        .attention-main-center {
            display: flex;
            justify-content: space-between;
            margin-left: 10px;
            flex: 1;

            .attention-size {
                height: 50px;
                line-height: 25px;
                margin-top: 3px;

                .attention-name {
                    font-size: 14px;
                }

                .attention-sess {
                    font-size: 12px;
                    color: #a0a0a0;

                    &>span:nth-child(1) {
                        margin-left: 0px;
                    }

                    span {
                        // margin: 6px;
                    }
                }
            }



            .attention-right {
                height: 50px;
                line-height: 50px;

                span {
                    font-size: 14px;
                    padding: 5px 12px;
                    border-radius: 999px;
                    background-color: #f0f0f0;

                    color: #eb4b3a;
                }
            }
        }
    }
}</style>